<!doctype>
<head>
<link type="text/css" rel="stylesheet" href="/static/dash.css">
<script src="/static3/dygraph/dygraph-combined.js"></script>
<script src="/static3/js-expression-eval/parser.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
  //google.load('visualization', '1', {packages: ['gauge']});
  google.load('jquery', '1.7.0');
</script>
</head>
<body>

<div id="controls">
  <span class="title-f">
    <a href="/dashboards">&#x2302;</a>
    <a id="edit" href="/dashboards">&#x270e;</a>
  </span>
  <span class="title" id="title"></span>
  <span id="buttons">
    <span class="bt-group">
      <input type="checkbox" id="ct-update" checked=checked onclick="toggleUpdates()">Live updates</input>
      <input type="checkbox" checked=checked id="ct-sync-graphs" onclick="toggleSync()">Sync zooms</input>
      <input type="checkbox" checked=checked id="ct-pull-on-pan" onclick="togglePullOnPan()">Auto fetch</input>
    </span>

    <span class="bt-group">
      Zoom:
      <button onclick="setLast(24*60*60)">-1d</button>
      <button onclick="setLast(60*60)">-1h</button>
      <button onclick="setLast(15*60)">-15m</button>
      <button onclick="setLast(60)">-60s</button>
      <button onclick="toggleDates()">Date/time</button>
    </span>

    <!--span class="bt-group">
    Load:
    <button onclick="loadMore(365*24*60*60, '43200s')">1y</button>
    <button onclick="loadMore(31*24*60*60, '3600s')">1m</button>
    <button onclick="loadMore(7*24*60*60, '600s')">1w</button>
    <button onclick="loadMore(24*60*60, '60s')">1d</button>
    <button onclick="loadMore(60*60, '15s')">1h</button>
    </span-->

    <span class="bt-group">
      <button onclick="loadFromZoom()">Update</button>
    </span>

    <span class="bt-group bt-group-end">
      <button onclick="shareView()">Update URL</button>
    </span>
  </span>
</div>

<div id="graphs"></div>
<div id="loading" style="display:none">Loading...</div>
<div id="error" style="display:none"></div>

<div id="datetime" style="display:none">
  <table>
  <tr>
    <td>From</td>
    <td>
      <input id="date-from" type="date">
      <input id="time-from" type="time">
    </td>
  </tr>
  <tr>
    <td>To</td>
    <td>
      <input id="date-to" type="date">
      <input id="time-to" type="time">
    </td>
  </tr>
  <tr>
    <td></td>
    <td style="text-align:right">
      <button onclick="closeDateSelector()">Cancel</button>
      <button onclick="validateDates()">Ok</button>
    </td>
  </tr>
  </table>
  <dl>
    <dt>Pan</dt><dd>drag</dd>
    <dt>Zoom in</dt><dd>double-click | scroll wheel</dd>
    <dt>Zoom out</dt><dd>shift+double-click | scroll wheel</dd>
    <dt>Restore</dt><dd>ctrl+double-click</dd>
    <dt>Pick region</dt><dd>shift+drag</dd>
  </dl>
</div>

<script src="/static/dash_interaction.js"></script>
<script src="/static/dash.js"></script>
<script>
function main() {
  parseOpts();
  if (opts.is_test) {
    setupTestDashboard();
  } else {
    setupDashboard();
  }
}

main();
</script>
